<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="园所名称：" prop="name">
                      <el-select v-model="queryParams.code" @change="selectSchool" clearable filterable placeholder="请选择">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
         </el-form-item>
         <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
        </el-form>
        <div class="echart" >
          <div class="schoolTestChart" ref="schoolTestChart"></div>
          <div class="averageChart" ref="averageChart"></div>
          <div class="ageTestChart" ref="ageTestChart"></div>
        </div>
    </div>
</template>
<script>
  import {schoolList } from "@/api/qu/qyyerygk";
  import moment from "moment";
 export default {
   name: "ystcsj",
   data() {
     return {
          // 查询参数
           queryParams: {
             code:'123'
           },
           schoolList:[],
           ageTestChart:null,
           ageTestList:[
              {name:'3岁',run:4.5,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'3.5岁',run:4.5,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'4岁',run:4.5,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'4.5岁',run:4.8,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'5岁',run:4.5,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'5.5岁',run:4.9,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
              {name:'6岁',run:4.5,longJump:4.8,sitReach:4.7,beamn:4.9,jump:4.9},
           ],
           legendSelected:{
                '10m*往返跑':true,
                '跳远':false,
                '坐位体前屈':false,
                '平衡木':false,
                '双脚跳远':false,
           },
           averageChart:null,
           averageList:[
                {name:'10m*往返跑',value:10},
                {name:'跳远',value:20},
                {name:'坐位体前屈',value:20},
                {name:'平衡木',value:20},
                {name:'双脚跳远',value:20},
           ],
           schoolTestChart:null,
           schoolTestList:[
              {name:'优秀',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
              {name:'及格',run:40,longJump:30,sitReach:10,beamn:40,jump:10},
              {name:'不及格',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
           ]
        } 
   }, 
   created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       this.getschoolList()
      
   },
   mounted(){
        // this.getList()
        this.ageTestChart = this.$echarts.init(this.$refs.ageTestChart);
        this.averageChart = this.$echarts.init(this.$refs.averageChart);
        this.schoolTestChart = this.$echarts.init(this.$refs.schoolTestChart);
        this.ageTestChartFun();
        this.averageChartFn();
        this.schoolTestChartFn()
   },
   methods: {
    selectSchool(){

    },
    handleQuery(){

    },
    resetQuery(){

    },
     //获取学校列表
     async getschoolList(){
        const data = await schoolList();
        this.schoolList=data.rows;
 
     },
     ageTestChartFun(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '各年龄幼儿的体测平均成绩',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.ageTestList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '10m*往返跑',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.ageTestList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.ageTestList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.ageTestList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.ageTestList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.ageTestList.map(item=>item.jump),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.ageTestChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
    
    averageChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '园所各项平均分统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.averageList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '',
                  type: 'line',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.averageList.map(item=>item.value)
              },
             
          ]
          }
             // 使用刚指定的配置项和数据显示图表
          this.averageChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
    schoolTestChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '体测成绩评价分布图',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
        //   dataZoom:{
        //    bottom:0,
        //    show:12/this.schoolTestList.length<1,
        //    // show:true,
        //    type:'slider',
        //    zoomLock:true,
        //    brushSelect:false,
        //    height:8,
        //    // backgroundColor:'#000000',
        //    handleSize:'0',
        //    // moveHandleSize:1,
        //    // moveHandleStyle:{
        //    //   borderType:'dotted'
        //    // },
        //    sow:true,
        //    xAxisIndex:[0],
        //    start:0,
        //    end:12/this.schoolTestList.length*100
        //  },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.schoolTestList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2ec7c9','#5ab1ef'],
          series: [
              {
                  name: '10m*往返跑',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolTestList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolTestList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.schoolTestList.map(item=>item.jump),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.schoolTestChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
       //地图监听窗口缩放事件
     monitorResize(){
      this.ageTestChart.resize();
      this.averageChart.resize();
      this.schoolTestChart.resize();
    },
   }
 };
</script>
<style lang="scss" scoped>
 .echart{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height:500px;
    .schoolTestChart{
        width: 45%;
        height:70%;
    }
    .averageChart{
        width: 45%;
        height:70%;
    }
    .ageTestChart{
      margin-top: 50px;
        width: 80%;
        height: 70%;
    }
 }
</style>